<template>
  <CardItem
    title="合同即将到期"
    :num="num"
    :icon="icon"
    type="ExpirationContract"
    :columns="columns"
    :tableLoading="tableLoading"
    :data="data"
    @goMore="goMore"
  />
</template>

<script>
import { message } from "ant-design-vue";
import {
  defineComponent,
  reactive,
  ref,
  computed,
  watch,
  toRaw,
  toRefs,
} from "vue";
import utils from "@/common/utils/utils";
import request from "@/common/utils/request";
import CardItem from "@/views/home/components/CardItem.vue";
export default defineComponent({
  name: "ExpirationContractCard",
  components: {CardItem},
  props: {

  },
  setup(props, context) {

    const state = reactive({
      num: 0,
      icon: utils.staticPath + `images/workbench/contract.jpg`,
      data: [],
      tableLoading: false,
    });

    // 合同到期
    const getExpirationContract = () => {
      state.tableLoading = true;
      request.get("/org", "/workbench/contractExpireInfo").then((res) => {
        state.data = res?.data || [];
        state.num = res?.data?.find((v) => v.timeType == 'nearExpire')?.contractNums || 0;
      }).finally(() => {
        state.tableLoading = false;
      });
    };

    getExpirationContract();

    const goMore = () => {

    };


    return {
      ...toRefs(state),
      columns,
      goMore,
    };
  },
});

const columns = [
  {
    title: "时间",
    key: 'timeTypeTxt',
    dataIndex: "timeTypeTxt",
    width: 140,
  },
  {
    title: "合同面积",
    dataIndex: "expiredArea",
    key: 'expiredArea',
    className: "column-money",
    width: 100,
  },
  {
    title: "合同份数",
    dataIndex: "contractNums",
    key: 'contractNums',
    className: "column-days",
    width: 100,
  },
];

</script>

<style lang="less" scoped>

</style>
